<section>
  <form fuiForm labelFlex="1" inputFlex="4">
    <fui-form-item label="Prefix Input">
      <fui-input prefix="user"></fui-input>
    </fui-form-item>
    <fui-form-item label="Suffix Input">
      <fui-input suffix="check"></fui-input>
    </fui-form-item>
    <fui-form-item label="Prefix & Suffix Input">
      <fui-input prefix="user" suffix="star"></fui-input>
    </fui-form-item>
    <fui-form-item label="Number (0 - 10)">
      <fui-input-number
        name="inputNumberScale"
        [fuiMinValue]="0"
        [fuiMaxValue]="10"
        [step]="1"
        [(ngModel)]="inputNumberScale"
        required
      ></fui-input-number>
    </fui-form-item>
    <fui-form-item label="Number (step 100)">
      <fui-input-number
        name="inputNumberStep"
        [fuiMinValue]="0"
        [step]="100"
        [(ngModel)]="inputNumberStep"
      ></fui-input-number>
    </fui-form-item>
    <fui-form-item label="Number Disabled">
      <fui-input-number
        name="inputNumberDisabled"
        [disabled]="true"
        [(ngModel)]="inputNumberDisabled"
      ></fui-input-number>
    </fui-form-item>
    <fui-form-item label="File Input">
      <button fuiBtn="primary" [(fuiFileDialog)]="file">upload</button>
      {{ file | json }}
    </fui-form-item>
    <fui-form-item label="Multiple File Input">
      <button fuiBtn="primary" 
        [(fuiFileDialog)]="files"
        [fuiFileDialogMultiple]="true"
        (fuiFileDialogChange)="onSelectFileChange($event)"
      >upload multiple</button>
      {{ files | json }}
    </fui-form-item>
    <fui-form-item label="Blur">
      <fui-input (blur)="onBlur($event)"></fui-input>
    </fui-form-item>
  </form>
</section>
